<template>
	<view class="body">
		<view class="headBox">
			<view class="titleBox">
				<image :src="imgUrl" mode=" aspectFit" class="frontBox"></image>
				<text class="school">湖南涉外经济学院</text>
			</view>
			<view class="informBG">
				<view class="informIconBox">
					<image class="IconC" :src="infoInconUrl"></image>
				</view>
				<view class="infoTextBox">
					<text class="infoText">失物招领：张三同学身份证落在</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="proceBG">
				<view class="proceIconBox">
					<image class="IconCS" :src="infoInconUrl"></image>
				</view>
				<view class="proceTitleBox">
					<text class="proceTitle">★任务为前置任务，必须首先完成</text>
					<hr>
				</view>

				<view class="proceListBox">
					<view v-for="item in taskList" :key="item.id" class="proceListLine">
						<view  class="proceList">{{preTaskId===item.id?"★":"☆"}}{{item.procName}}
							<template>
								<!-- <text v-if="preTaskId===item.id" @click="clickTest(item.id,true)" class="GotoProc" >》★《</text> -->
								<template v-if="preTaskId===item.id">
									<view  class="GotoProc" @click="clickTest(item.id,true)">》★《</view>
								</template>
								<view v-else-if="finshList.indexOf(item.id)==-1" @click="clickTest(item.id,false)" class="GotoProc unfinshed">去完成★</view>
								<view v-else-if="finshList.indexOf(item.id)!=-1" @click="clickTest(item.id,true)" class="GotoProc  finshed">已完成</view>
							</template>
						</view>
					</view>
				</view>
				<!-- <view @click="clickTest(1,true)">测试按钮</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg: 'hello',
				flag: false,
				imgUrl: '/static/Img/LogoFront.png',
				infoInconUrl: '/static/icon/InformIcon.png',
				taskList: [], //流程列表
				finshList: [],//未完成列表
				unfinshList: [],
				preTaskId: 1
			}
		},
		onLoad() {
			this.getTaskData();
		},
		methods: {
			// 获取页面数据
			getTaskData() {
				let loginToken = uni.getStorageSync('login');
				console.log("登录的数据", loginToken);
				let _taskList = this.taskList;
				let _finshList = this.finshList;
				let _unfinshList = this.unfinshList;
				if (loginToken) {
					uni.request({
						url: this.$httpUrl + '/QrCodeProc/GetTask',
						method: 'POST',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
						},
						data: {
							studentNo: loginToken.studentNo
						},
						success: success => {
							console.log("流程列表返回数据", success);
							uni.showToast({
								title: '获取成功'
							})
							//流程
							this.preTaskId = success.data.data.preTaskId;
							_taskList = success.data.data.processes;
							_finshList = success.data.data.finshId;
							_unfinshList = success.data.data.unFinshId;
							this.taskList = _taskList;
							this.finshList = _finshList;
							this.unfinshList = _unfinshList;
						},
						fail: (fail) => {
							console.log(fail);
						}
					})
				} else {
					console.log("未登录")
				}
			},
			clickTest(id='',status=false) {
				if(status){
					uni.navigateTo({
						url:'./info?id='+id
					})
				}
				else{
					uni.showToast({
						title:'未完成前置任务',
						icon:'none'
					})
					return false
				}
			}
		}
	}
</script>

<style>
	.headBox {
		width: 100vw;
		height: 20vh;
		background: #1c81fd;
		text-align: center;
		position: relative;
	}

	.titleBox {
		margin: 0rpx auto;
		width: 575rpx;
		height: 10vh;
		/* border: 1px #FFFFFF solid; */
	}

	.content {
		height: 80vh;
		background-color: #ececec;
	}

	.frontBox {
		/* border: 1px red solid; */
		width: 30vw;
		height: 3vh;
		color: red;
		margin-top: 20rpx;
	}

	/* 学校标题 */
	.school {
		display: block;
		color: #FFFFFF;
		font-size: 1.4rem;
		line-height: 3.8rem;
		/* height: 2.8rem; */
	}

	.informBG {
		position: absolute;
		line-height: 8vh;
		height: 8vh;
		width: 90vw;
		left: 5vw;
		top: 15vh;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 2rpx 2rpx 10rpx #27347d;
	}

	.informIconBox {
		position: absolute;
		/* border: 1px #FF0000 solid; */
		height: 8vh;
		width: 14vw;
		left: 2vw;

	}

	.IconC {
		height: 7vh;
		width: 15.5vw;
		display: inline-block;
		vertical-align: middle;
	}

	.IconCS {
		height: 5vh;
		width: 10.5vw;
		display: inline-block;
		vertical-align: middle;
	}

	.infoTextBox {
		/* text-align: center; */
		position: absolute;
		font-size: 1.3rem;
		left: 17vw;
	}

	/* 报道流程body的Box */
	.proceBG {
		position: relative;
		/* line-height: 8vh; */
		min-height: 15vh;
		height: auto;
		width: 90vw;
		left: 5vw;
		top: 5vh;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 2rpx 2rpx 10rpx #27347d;

	}

	/* 报道标题Box */
	.proceTitleBox {
		max-height: 5vh;
		line-height: 5vh;
		position: absolute;
		left: 17vw;
		font-size: 1rem;
		width: 70.5vw;
	}
	.proceTitle{
		font-size: 32rpx;
	}

	/* 报道流程的box */
	.proceListBox {
		padding-top: 6vh;
	}

	.proceListLine {
		padding-bottom: 2vh;
		    display: flex;
		    justify-content: space-between;
		
	}

	/* 报道流程列表 */
	.proceList {
		    margin-left: 17vw;
		    display: flex;
		    height: 5vh;
		    line-height: 5vh;
		    justify-content: space-between;
		    width: 100%;
		
	}

	/* 去完成按钮 */
	.GotoProc {
		display: inline;
		float: right;
		margin-right: 10vw;
		color: white;
		background: #1c81fd;
		padding: 0.2rem;
		font-size: 0.7rem;
		height: 4vh;
		line-height: 4vh;
		width: 15vw;
		text-align: center;
		border-radius: 1vw;
	}

	/* 已完成按钮 */
	.finshed {
		background: #55ff00;
	}

	/* 未完成按钮 */
	.unfinshed {
		background: #5b6478;
		/* pointer-events: none; */
	}

	.proceIconBox {
		position: absolute;
		/* border: 1px #FF0000 solid; */
		height: 5vh;
		width: 13.5vw;
		left: 2vw;
	}
</style>
